<template>
  <div>
    <a-modal
      title="设置成员"
      :visible="visible && !userVisible"
      :destroyOnClose="true"
      @ok="cancel"
      @cancel="cancel"
      :width="800"
    >
      <div style="text-align: start">
        <a-button @click="addUserRole">添加用户</a-button>
      </div>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        rowKey="id"
        :pagination="false"
        style="height: 300px; margin-top: 20px"
        :scroll="{ y: 200 }"
      >
        <div slot="action" slot-scope="text, record">
          <a-popconfirm
            title="确定删除吗?"
            @confirm="deleteRoleUser(record)"
            ok-text="删除"
            cancel-text="取消"
          >
            <a style="margin-right: 8px"> 删除 </a>
          </a-popconfirm>
          <a
            v-if="record.personInCharge == 0"
            @click="serRoleUserCharge(record)"
            style="margin-right: 8px"
          >
            设置主管
          </a>
        </div>
      </a-table>
      <div class="pagination">
        <a-pagination
          :defaultPageSize="pagination.pageSize"
          :current="pagination.current"
          show-quick-jumper
          :total="pagination.total"
          show-less-items
          @change="onPageChange"
        />
      </div>
    </a-modal>
    <un-include-members-component
      v-if="userVisible"
      :roleId="roleId"
      :visible="userVisible"
      :cancel="userHandleCancel"
    ></un-include-members-component>
  </div>
</template>
<script>
import {
  getRoleMenber,
  getNotRoleMenber,
  removeRoleUser,
  serRoleUserCharge,
} from '@/api/role';
import unIncludeMembersComponent from '@/components/unIncludeMembersComponent';
const columns = [
  {
    title: '账号',
    dataIndex: 'userId',
    align: 'center',
  },
  {
    title: '昵称',
    dataIndex: 'userName',
    align: 'center',
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    align: 'center',
  },
];
export default {
  name: 'department',
  components: { unIncludeMembersComponent },
  props: {
    visible: Boolean,
    cancel: Function,
    roleId: String,
  },
  data() {
    return {
      dataSource: [],
      columns,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      parames: {},
      userVisible: false,
    };
  },
  created() {
    this.getData();
  },
  computed: {},
  methods: {
    getData() {
      let request = { ...this.parames };
      request.id = this.roleId;
      request.currentPage = this.pagination.current;
      request.pageSize = this.pagination.pageSize;
      getRoleMenber(request).then((response) => {
        this.dataSource = response.data.list;
        this.pagination.total = response.data.count;
      });
    },
    onPageChange(page, pageSize) {
      this.pagination.current = page;
      this.pagination.pageSize = pageSize;
      this.getData();
    },
    addUserRole() {
      this.userVisible = true;
    },
    userHandleCancel() {
      this.getData();
      this.userVisible = false;
    },
    deleteRoleUser(record) {
      removeRoleUser({
        id: this.roleId,
        key: [record.id],
      }).then((res) => {
        console.log(res);
        this.getData();
      });
    },
    serRoleUserCharge(record) {
      console.log(record);
      serRoleUserCharge({
        role_id: this.roleId,
        user_id: record.id,
      }).then((res) => {
        console.log(res);
        this.getData();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep ::-webkit-scrollbar {
  width: 0 !important;
}
.pagination {
  height: 30px;
  line-height: 30px;
  width: 100%;
  text-align: right;
}
</style>
